<template>
  <div class="box">
    <div class="tab-item" @click="handleClickTab(item,index)" :class="{'active':item.selected}" v-for="(item,index) in tabsWay" :key="index">
      {{item.title}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabsWay: [
        {
          title: "流量统计",
          selected: true,
        },
        {
          title: "订单统计",
          selected: false,
        },
        {
          title: "商品统计",
          selected: false,
        },
      ],
    };
  },
  methods: {
    handleClickTab(val, index) {
      this.tabsWay.map((item) => {
        item.selected = false;
      });
      val.selected = true;

      /**
       * 将数据回调
       */

      this.$emit("changed", { ...val, index: index });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./styles.scss";
.tab-item {
  margin-right: 20rpx;
  padding: 8rpx 18rpx;
  color: #333;
  font-size: 24rpx;
  border-radius: 100px;
}
.active {
  background: #333;
  color: #fff;
}
.box {
  display: flex;
}
</style>